(function () {
    // 每个格子大小px
    const EveryGridSize = 40;


    //棋盘水平、垂直的格子数，但是落点数就会多一个
    const boardX = 14;
    const boardY = 14;

    //使用的棋子颜色 0代表观众 1代表黑棋子 2代表白棋子
    let color = 0;

    // 有对手的时候而且是黑棋才可以下  别人下完的时候才可以下
    let isMePlay = false;

    //黑棋子和白棋子的二维数组关系 0代表没棋子 1代表黑棋子 2代表白棋子 -1代表确认落点
    const boardData = $.initBoardData([], boardX + 1, boardY + 1);
    // console.log(boardData)


    //棋盘尺寸
    const {
        width,
        height
    } = $.calBooardSize(boardX * EveryGridSize, boardY * EveryGridSize);



    //用户交互
    let socket = io.connect();
    // 用户点击开始游戏
    $('.game-switch').one('click', function () {
        socket.emit('login');
        $('.game-switch').css('width','400px').html('等待其他游戏玩家连接...');
        // 获得棋子颜色
        socket.on('start', (newColor) => {
            console.log(newColor == 1 ? '持黑棋' : '持白棋')
            color = newColor;
            if (newColor == 1) isMePlay = true;

            
        })

    })
    //游戏开始
    socket.on('gaming', () => {
        $('.game-switch').remove();
        //显示棋子信息到页面
        $('#color-Chess').html(function(){
            if(color == 1) return '你是黑棋';
            if(color == 2)return '你是白棋';
            return '你是观众';
        })
        $('.game-status-board').fadeIn();
        console.log('游戏进行中')
    })
    //游戏中断
    socket.on('stop', () => {
        isMePlay = false;
        console.log('游戏中断')
    })
    //监听棋子
    socket.on('userDown', function (options) {
        const {
            i,
            j,
            index,
            color
        } = options;
        boardData[i][j] = color;
        $('.grid').eq(index).appendToGrid(color, EveryGridSize);
        isMePlay = true;
    })

    // 游戏结束
    socket.on('gameover', function () {
        console.log('游戏结束');
        alert('gameover');
        $('.chess').remove();
        boardData.forEach(arr => arr.fill(0));
    })

    // 用户下棋
    function userDown(i, j, color) {
        isMePlay = false;
        socket.emit('userDown', {
            i,
            j,
            index: i * (boardX + 1) + j,
            color
        })
    }



    //创建棋盘的棋子落点位置网格
    $(document.createElement('div')).css({
            position: 'absolute',
            top: `-${EveryGridSize/2}px`,
            left: `-${EveryGridSize/2}px`,
            width: parseFloat(width) + EveryGridSize + 'px',
            height: parseFloat(height) + EveryGridSize + 'px',
        })
        .initGameBoard(boardX + 1, boardY + 1, EveryGridSize, false)
        .appendTo('.game-board');


    //创建棋盘
    $('.game-board').css({
            width,
            height
        })
        .initGameBoard(boardX, boardY, EveryGridSize)
        // 每个格子的点击事件
        .on('click', '.grid', function (e) {
            if (!isMePlay || color == 0) return;
            let i, j;
            // 存在两种情况 e.target有可能是 grid 和 chess

            //获取当前点击的位置
            if ($(e.target).attr('class') == 'grid') {
                i = $(e.target).data().i;
                j = $(e.target).data().j;

                if (boardData[i][j] == 0) {
                    // 清空上一个落点位置,并设置为0
                    if ($('#confirmChess').get().length != 0) {
                        const pos = $('#confirmChess').parent().data();
                        boardData[pos.i][pos.j] = 0;
                        $('#confirmChess').remove()
                    }
                    // 插入落点位置
                    $(e.target).appendToGrid(color, EveryGridSize, 0.5);
                    boardData[i][j] = -1;
                }
                //如果已经是落点位置
                else if (boardData[i][j] == -1) {
                    $(e.target).html('').appendToGrid(color, EveryGridSize);
                    boardData[i][j] = color;
                    userDown(i, j, color);
                    //判断游戏结束了
                    $.isGameOver(boardData, i, j, color, function (status) {
                        if (status) {
                            socket.emit('gameover')
                        }
                    });
                }
            } else if ($(e.target).attr('class') == 'chess') {
                i = $(e.target).parent().data().i;
                j = $(e.target).parent().data().j;
                // 如果是落点位置
                if (boardData[i][j] == -1) {
                    $(e.target).parent().html('').appendToGrid(color, EveryGridSize);
                    boardData[i][j] = color;
                    userDown(i, j, color, e.target);
                    //判断游戏结束了
                    $.isGameOver(boardData, i, j, color, function (status) {
                        if (status) {
                            socket.emit('gameover')
                        }
                    });
                }
            }
            return false;
        })




}())